<template>
<div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="租房分期" name="first">
      <el-button type="warning" plain>修改租房分期产品</el-button>
      <el-button type="warning" @click="saveJrProduct" plain>添加租房分期通道</el-button>
      <hr>
      <el-table
        :data="tableData"
        border
        style="width: 91%">
        <el-table-column
          fixed
          prop="jrProductName"
          label="产品名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="120">
        </el-table-column>
        <el-table-column
          prop="accountInformation"
          label="账户信息"
          width="240">
        </el-table-column>
        <el-table-column
          prop="instalmentPeriodName"
          label="分期期限"
          width="120">
        </el-table-column>
        <el-table-column
          prop="repaymentTypeName"
          label="还款方式"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creditLine"
          label="授信额度"
          width="120">
          <template slot-scope="scope">
            {{scope.row.creditLine}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="delFlg"
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.delFlg==1" plain>未正常</el-button>
            <el-button type="success" v-if="scope.row.delFlg==0" plain>正常</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-link @click="selectJrProduct(scope.row)" type="success" size="small">查看</el-link>&emsp;&emsp;


            <el-link type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">修改</el-link>&emsp;&emsp;
            <el-link @click="UpdateJrProduct(scope.row)" type="warning" v-if="scope.row.delFlg==0" size="small">修改</el-link>&emsp;&emsp;


            <el-link  type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">作废</el-link>
            <el-link @click="softRemove(scope.row)" type="danger" v-if="scope.row.delFlg==0" size="small">作废</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>


    <el-tab-pane label="收房贷" name="second">
      <el-button type="warning" plain>修改租房分期产品</el-button>
      <el-button type="warning" @click="saveJrProduct" plain>添加租房分期通道</el-button>
      <hr>
      <el-table
        :data="tableData"
        border
        style="width: 91%">
        <el-table-column
          fixed
          prop="jrProductName"
          label="产品名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="120">
        </el-table-column>
        <el-table-column
          prop="accountInformation"
          label="账户信息"
          width="240">
        </el-table-column>
        <el-table-column
          prop="instalmentPeriodName"
          label="分期期限"
          width="120">
        </el-table-column>
        <el-table-column
          prop="repaymentTypeName"
          label="还款方式"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creditLine"
          label="授信额度"
          width="120">
          <template slot-scope="scope">
            {{scope.row.creditLine}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="delFlg"
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.delFlg==1" plain>未正常</el-button>
            <el-button type="success" v-if="scope.row.delFlg==0" plain>正常</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-link @click="handleClick(scope.row)" type="success" size="small">查看</el-link>&emsp;&emsp;
            <el-link type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">修改</el-link>&emsp;&emsp;
            <el-link @click="UpdateJrProduct(scope.row)" type="warning" v-if="scope.row.delFlg==0" size="small">修改</el-link>&emsp;&emsp;
            <el-link @click="softRemove(scope.row)" type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">作废</el-link>
            <el-link type="danger" v-if="scope.row.delFlg==0" size="small">作废</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>


    <el-tab-pane label="应收租约保理" name="third">
      <el-button type="warning" plain>修改租房分期产品</el-button>
      <el-button type="warning" @click="saveJrProduct" plain>添加租房分期通道</el-button>
      <hr>
      <el-table
        :data="tableData"
        border
        style="width: 91%">
        <el-table-column
          fixed
          prop="jrProductName"
          label="产品名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="资方"
          width="120">
        </el-table-column>
        <el-table-column
          prop="accountInformation"
          label="账户信息"
          width="240">
        </el-table-column>
        <el-table-column
          prop="instalmentPeriodName"
          label="分期期限"
          width="120">
        </el-table-column>
        <el-table-column
          prop="repaymentTypeName"
          label="还款方式"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creditLine"
          label="授信额度"
          width="120">
          <template slot-scope="scope">
            {{scope.row.creditLine}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="delFlg"
          label="状态"
          width="120">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.delFlg==1" plain>未正常</el-button>
            <el-button type="success" v-if="scope.row.delFlg==0" plain>正常</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-link @click="handleClick(scope.row)" type="success" size="small">查看</el-link>&emsp;&emsp;
            <el-link type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">修改</el-link>&emsp;&emsp;
            <el-link @click="UpdateJrProduct(scope.row)" type="warning" v-if="scope.row.delFlg==0" size="small">修改</el-link>&emsp;&emsp;
            <el-link @click="softRemove(scope.row)" type="text" v-if="scope.row.delFlg==1" disabled="disabled" size="small">作废</el-link>
            <el-link type="danger" v-if="scope.row.delFlg==0" size="small">作废</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

  </el-tabs>

  <el-dialog title="添加租房分期产品" :visible.sync="dialogFormVisible">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="产品名称" prop="jrProductName">
        <el-input v-model="ruleForm.jrProductName"></el-input>
      </el-form-item>
      <el-form-item label="资金提供方" prop="companyName">
        <el-select v-model="ruleForm.companyName" placeholder="请选择活动区域">
          <el-option label="久金锁" value="久金锁"></el-option>
          <el-option label="应花" value="应花"></el-option>
          <el-option label="海尔保理" value="海尔保理"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="分期期限" prop="instalmentPeriod">
        <el-radio-group v-model="ruleForm.instalmentPeriod">
          <el-radio label="11">11个月</el-radio>
          <el-radio label="23">23个月</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="授信额度" prop="creditLine">
        <el-input v-model="ruleForm.creditLine"></el-input>%
      </el-form-item>

      <el-form-item label="还款方式" prop="repaymentType">
        <el-radio-group v-model="ruleForm.repaymentType">
          <el-radio label="1">按月还款</el-radio>
          <el-radio label="2">按季还款</el-radio>
          <el-radio label="3">按租约周期支付</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="支付PC链接(URL)" prop="urlPayPc">
        <el-input v-model="ruleForm.urlPayPc"></el-input>
      </el-form-item>

      <el-form-item label="支付移动链接(URL)" prop="urlPayMoble">
        <el-input v-model="ruleForm.urlPayMoble"></el-input>
      </el-form-item>

      <el-form-item label="补全信息PC(URL)" prop="urlAddDetailInfoPc">
        <el-input v-model="ruleForm.urlAddDetailInfoPc"></el-input>
      </el-form-item>

      <el-form-item label="补全信息移动(URL)" prop="urlAddDetailInfoMobile">
        <el-input v-model="ruleForm.urlAddDetailInfoMobile"></el-input>
      </el-form-item>

      <el-form-item label="App下载(URL)" prop="urlAppDownload">
        <el-input v-model="ruleForm.urlAppDownload"></el-input>
      </el-form-item>

      <el-form-item label="账户类型" prop="accountType">
        <el-select v-model="ruleForm.accountType" placeholder="请选择">
          <el-option label="请选择" value="-1" selected></el-option>
          <el-option label="对公账户" value="1"></el-option>
          <el-option label="对私账户" value="2"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="开户省份" v-if="ruleForm.accountType==1 || ruleForm.accountType==2">
        <el-select v-model="ruleForm.bankAccountProvince" placeholder="请选择">
          <el-option value='-1' label="请选择"></el-option>
          <el-option value='11' label="北京市">北京市</el-option>
          <el-option value='12' label="天津市">天津市</el-option>
          <el-option value='13' label="河北省">河北省</el-option>
          <el-option value='14' label="山西省">山西省</el-option>
          <el-option value='15' label="内蒙古自治区">内蒙古自治区</el-option>
          <el-option value='21' label="辽宁省">辽宁省</el-option>
          <el-option value='22' label="吉林省">吉林省</el-option>
          <el-option value='23' label="黑龙江省">黑龙江省</el-option>
          <el-option value='31' label="上海市">上海市</el-option>
          <el-option value='32' label="江苏省">江苏省</el-option>
          <el-option value='33' label="浙江省">浙江省</el-option>
          <el-option value='34' label="安徽省">安徽省</el-option>
          <el-option value='35' label="福建省">福建省</el-option>
          <el-option value='36' label="江西省">江西省</el-option>
          <el-option value='37' label="山东省">山东省</el-option>
          <el-option value='41' label="河南省">河南省</el-option>
          <el-option value='42' label="湖北省">湖北省</el-option>
          <el-option value='43' label="湖南省">湖南省</el-option>
          <el-option value='44' label="广东省">广东省</el-option>
          <el-option value='45' label="广西壮族自治区">广西壮族自治区</el-option>
          <el-option value='46' label="海南省">海南省</el-option>
          <el-option value='51' label="四川省">四川省</el-option>
          <el-option value='52' label="贵州省">贵州省</el-option>
          <el-option value='53' label="云南省">云南省</el-option>
          <el-option value='54' label="西藏自治区">西藏自治区</el-option>
          <el-option value='61' label="陕西省">陕西省</el-option>
          <el-option value='62' label="甘肃省">甘肃省</el-option>
          <el-option value='63' label="青海省">青海省</el-option>
          <el-option value='64' label="宁夏回族自治区">宁夏回族自治区</el-option>
          <el-option value='65' label="新疆维吾尔自治区">新疆维吾尔自治区</el-option>
          <el-option value='50' label="重庆市">重庆市</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="银行名称" v-if="ruleForm.accountType==1 || ruleForm.accountType==2">
        <el-select v-model="ruleForm.bankSelect" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.bankName"
            :label="item.bankName"
            :value="item.bankName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开户支行" v-if="ruleForm.accountType==1">
        <el-input v-model="ruleForm.openingBank"></el-input>
      </el-form-item>

      <el-form-item label="联行行号" v-if="ruleForm.accountType==1">
        <el-input v-model="ruleForm.bankBranchCodeLh"></el-input>
      </el-form-item>

      <el-form-item label="账户姓名" v-if="ruleForm.accountType==1 || ruleForm.accountType==2">
        <el-input v-model="ruleForm.accountName"></el-input>
      </el-form-item>

      <el-form-item label="银行卡号" v-if="ruleForm.accountType==1 || ruleForm.accountType==2">
        <el-input v-model="ruleForm.bankCardNumber"></el-input>
      </el-form-item>




      <el-form-item label="申请条件" prop="applicationConditions">
        <el-input type="textarea" v-model="ruleForm.applicationConditions"></el-input>
      </el-form-item>

      <el-form-item label="风控要求" prop="riskRequirement">
        <el-input type="textarea" v-model="ruleForm.riskRequirement"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>





  <el-dialog title="租房分期产品详情" :visible.sync="dialogFormVisible2">
    <el-form :model="form" label-width="150px" class="demo-ruleForm">
      <el-form-item label="产品名称">
        {{form.jrProductName}}
      </el-form-item>

      <el-form-item label="资金提供方">
        {{form.companyName}}
      </el-form-item>

      <el-form-item label="分期期限">
       {{form.instalmentPeriod}}个月
      </el-form-item>

      <el-form-item label="授信额度">
        {{form.creditLine}}%
      </el-form-item>

      <el-form-item label="还款方式">
        {{form.instalmentPeriodName}}
      </el-form-item>

      <el-form-item label="支付PC链接(URL)">
        {{form.urlPayPc}}
      </el-form-item>

      <el-form-item label="支付移动链接(URL)">
        {{form.urlPayMoble}}
      </el-form-item>

      <el-form-item label="补全信息PC(URL)">
        {{form.urlAddDetailInfoPc}}
      </el-form-item>

      <el-form-item label="补全信息移动(URL)">
       {{form.urlAddDetailInfoMobile}}
      </el-form-item>

      <el-form-item label="App下载(URL)" prop="urlAppDownload">
        {{form.urlAppDownload}}
      </el-form-item>

      <el-form-item label="账户类型" prop="accountType">
        {{form.accountType==1?'对公账户':'对私账户'}}
      </el-form-item>


      <el-form-item label="开户省份" v-if="form.accountType==1 || form.accountType==2">
        {{form.bankAccountProvince}}
      </el-form-item>

      <el-form-item label="银行名称" v-if="form.accountType==1 || form.accountType==2">
        {{form.bankName}}
      </el-form-item>

      <el-form-item label="开户支行" v-if="form.accountType==1">
       {{form.openingBank}}
      </el-form-item>

      <el-form-item label="联行行号" v-if="form.accountType==1">
       {{form.bankBranchCodeLh}}
      </el-form-item>

      <el-form-item label="账户姓名" v-if="form.accountType==1 || form.accountType==2">
        {{form.accountName}}
      </el-form-item>

      <el-form-item label="银行卡号" v-if="form.accountType==1 || form.accountType==2">
        {{form.bankCardNumber}}
      </el-form-item>




      <el-form-item label="申请条件" prop="applicationConditions">
       {{form.applicationConditions}}
      </el-form-item>

      <el-form-item label="风控要求" prop="riskRequirement">
       {{form.riskRequirement}}
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
import * as FinancialListApi from "@/api/wishu-financial/list";
export default {
  name: "index",
  data(){
    return{
      dialogFormVisible2:false,
      formLabelWidth2:'120px',
      form:{},
      activeName:'first',
      tableData:[],
      formLabelWidth:'120px',
      ruleForm:{},
      index:1,
      dialogFormVisible:false,
      rules:{
        jrProductName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
        ]

        ,companyName: [
          { required: true, message: '请选择资金提供方', trigger: 'change' },
        ]


        ,instalmentPeriod: [
          { required: true, message: '请选择分期期限', trigger: 'change' },
        ]

        ,creditLine: [
          { required: true, message: '请输入正确授信额度', trigger: 'blur'},
          {type: 'number', message: '请输入正确数据', trigger: 'blur', transform: (value) => Number(value)},
          {type: 'number',min: 0, max: 100, message: '请输入正确数据', trigger: 'blur', transform: (value) => Number(value)}

        ]

        ,repaymentType: [
          { required: true, message: '请选择分期期限', trigger: 'change' },
        ]

        ,applicationConditions: [
          { required: true, message: '请输入申请条件', trigger: 'blur' },
        ]

        ,riskRequirement: [
          { required: true, message: '请输入封控要求', trigger: 'blur' },
        ],
      },

      options:[],
    }
  },
  methods:{
    selectJrProduct(data){
      this.dialogFormVisible2 = true;
      this.form = data;
    },
    handleClick(tab, event){
      if (tab.name=='first'){
        this.getFinancialList()
        this.index = 1
      }else if (tab.name=='second'){
        this.getProductRecieveList()
        this.index = 2
      }else {
        this.getProductProtectList()
        this.index = 3
      }
    },
    getFinancialList(){
      FinancialListApi.getFinancialList().then(res=>{
        this.tableData = res.data
      })
    },
    getProductRecieveList(){
      FinancialListApi.getProductRecieveList().then(res=>{
        this.tableData = res.data
      })
    },
    getProductProtectList(){
      FinancialListApi.getProductProtectList().then(res=>{
        this.tableData = res.data
      })
    },
    UpdateJrProduct(data){
      this.ruleForm = data;
      this.dialogFormVisible = true;
    },
    saveJrProduct(){
      this.ruleForm = {}
      this.dialogFormVisible = true;
    },
    getbankSelect(){
      FinancialListApi.getbankList().then(res=>{
        console.log(res.data)
        this.options = res.data;
      })
    },
    softRemove(data){
      if (confirm("是否作废本金融产品 (使本金融产品无效，不会影响过去已经生效的金融订单)")){
        FinancialListApi.softRemove(data.id).then(res=>{
        if (res.code==200){
          this.$message.success(res.msg);
          if (this.index==1){
            this.getFinancialList()
          }else if (this.index==2){
            this.getProductRecieveList()
          }else if (this.index==3){
            this.getProductProtectList()
          }
        }else {
          this.$message.error(res.msg)
        }
      })}

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.jrProductType = this.index
          alert(this.index)
          FinancialListApi.saveOrUpdateJrProduct(this.ruleForm).then(res=>{
            if (res.code==200){
              this.dialogFormVisible = false;
              this.$message.success(res.msg);
              if (this.index==1){
                this.getFinancialList()
              }else if (this.index==2){
                this.getProductRecieveList()
              }else if (this.index==3){
                this.getProductProtectList()
              }
            }else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(){
        this.ruleForm = {}
    },

  },
  created() {
    this.getFinancialList()
    this.getbankSelect()
  }
}
</script>

<style scoped>

</style>
